
<!DOCTYPE HTML>
<html lang="en" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>Introduction · diff docs</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        <meta name="author" content="snowdreams1006">
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-code/plugin.css">
                
            
                
                <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    

    <style>
    @media only screen and (max-width: 640px) {
        .book-header .hidden-mobile {
            display: none;
        }
    }
    </style>
    <script>
        window["gitbook-plugin-github-buttons"] = {"buttons":[{"user":"snowdreams1006","repo":"gitbook-plugin-diff","type":"star","size":"small"}]};
    </script>

    
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    
    
        <link rel="bookmark" href="/bookmark.ico" type="image/x-icon">
    
    
        <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png">
    
    
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-touch-icon-precomposed-152.png">
    
    
        
        <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120.png">
        
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png">
        
    
    
        
        <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple-touch-icon-precomposed-120.png">
        
        <link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon-precomposed-180.png">
        
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    
    
        
        <li>
            <a href="https://snowdreams1006.tech/" target="_blank" class="custom-link">blog</a>
        </li>
    
    

    
    <li class="divider"></li>
    

    
        
        
    
        <li class="chapter active" data-level="1.1" data-path="./">
            
                <a href="./">
            
                    
                    Introduction
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" >
            
                <a target="_blank" href="https://snowdreams1006.github.io/gitbook-official/">
            
                    
                    gitbook-official
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3" >
            
                <a target="_blank" href="https://snowdreams1006.github.io/gitbook-plugin-mygitalk/">
            
                    
                    gitbook-plugin-mygitalk
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4" >
            
                <a target="_blank" href="https://snowdreams1006.github.io/gitbook-plugin-readmore/">
            
                    
                    gitbook-plugin-readmore
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5" >
            
                <a target="_blank" href="https://snowdreams1006.github.io/gitbook-plugin-favicon-absolute/">
            
                    
                    gitbook-plugin-favicon-absolute
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6" >
            
                <a target="_blank" href="https://snowdreams1006.github.io/gitbook-plugin-copyright/">
            
                    
                    gitbook-plugin-copyright
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7" >
            
                <a target="_blank" href="https://snowdreams1006.github.io/gitbook-plugin-edit-link-plus/">
            
                    
                    gitbook-plugin-edit-link-plus
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8" >
            
                <a target="_blank" href="https://snowdreams1006.github.io/gitbook-plugin-multilingual-index/">
            
                    
                    gitbook-plugin-multilingual-index
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9" >
            
                <a target="_blank" href="https://snowdreams1006.github.io/gitbook-plugin-icp/">
            
                    
                    gitbook-plugin-icp
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.10" >
            
                <a target="_blank" href="https://snowdreams1006.github.io/hexo-plugin-gitalk/">
            
                    
                    hexo-plugin-gitalk
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.11" >
            
                <a target="_blank" href="https://snowdreams1006.github.io/hexo-plugin-readmore/">
            
                    
                    hexo-plugin-readmore
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.12" >
            
                <a target="_blank" href="https://security-plus.github.io/">
            
                    
                    security-plus
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>

    
    <li>
        
        
        
            
        
        
            <a href="http://www.beian.miit.gov.cn/" target="blank" class="gitbook-link">
                浙ICP备18042346号
            </a>
        
    </li>
    
</ul>

                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="." >Introduction</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                
                <div id="vip-container">
                    <h1 id="welcome-to-gitbook-plugin-diff-&#x1F44B;">Welcome to gitbook-plugin-diff &#x1F44B;</h1>
<p><a href="https://www.npmjs.com/package/gitbook-plugin-diff" target="_blank"><img src="https://img.shields.io/npm/v/gitbook-plugin-diff.svg" alt="npm:version"></a>
<a href="https://www.npmjs.com/package/gitbook-plugin-diff" target="_blank"><img src="https://img.shields.io/npm/dt/gitbook-plugin-diff.svg" alt="npm:download"></a>
<a href="https://www.npmjs.com/package/gitbook-plugin-diff" target="_blank"><img src="https://img.shields.io/badge/gitbook-*-blue.svg" alt="npm:prerequisite"></a>
<a href="https://github.com/snowdreams1006/gitbook-plugin-diff#readme" target="_blank"><img src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" alt="github:documentation"></a>
<a href="https://github.com/snowdreams1006/gitbook-plugin-diff/graphs/commit-activity" target="_blank"><img src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" alt="github:maintenance"></a>
<a href="https://github.com/snowdreams1006/gitbook-plugin-diff/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/npm/l/gitbook-plugin-diff.svg" alt="npm:license"></a>
<a href="https://github.com/snowdreams1006" target="_blank"><img src="https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg" alt="github:snodreams1006"></a>
<a href="https://snowdreams1006.tech/" target="_blank"><img src="https://img.shields.io/badge/website-snowdreams1006.tech-brightgreen.svg" alt="website:snodreams1006.tech"></a>
<a href="https://snowdreams1006.github.io/snowdreams1006-wechat-public.jpeg" target="_blank"><img src="https://img.shields.io/badge/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7-%E9%9B%AA%E4%B9%8B%E6%A2%A6%E6%8A%80%E6%9C%AF%E9%A9%BF%E7%AB%99-brightgreen.svg" alt="&#x5FAE;&#x4FE1;&#x516C;&#x4F17;&#x53F7;:&#x96EA;&#x4E4B;&#x68A6;&#x6280;&#x672F;&#x9A7F;&#x7AD9;-brightgreen.svg"></a></p>
<blockquote>
<p>A gitbook plugin for showing the differences between the codes within markdown</p>
</blockquote>
<h3 id="&#x1F3E0;-homepage">&#x1F3E0; <a href="https://github.com/snowdreams1006/gitbook-plugin-diff#readme" target="_blank">Homepage</a></h3>
<ul>
<li>Github : <a href="https://snowdreams1006.github.io/gitbook-plugin-diff/" target="_blank">https://snowdreams1006.github.io/gitbook-plugin-diff/</a></li>
<li>GitLab: <a href="https://snowdreams1006.gitlab.io/gitbook-plugin-diff/" target="_blank">https://snowdreams1006.gitlab.io/gitbook-plugin-diff/</a></li>
<li>Gitee : <a href="https://snowdreams1006.gitee.io/gitbook-plugin-diff/" target="_blank">https://snowdreams1006.gitee.io/gitbook-plugin-diff/</a></li>
</ul>
<h2 id="screenshot">Screenshot</h2>
<ul>
<li>usage</li>
</ul>
<pre><code class="lang-markdown">{% diff method=&quot;diffJson&quot; %}
<span class="hljs-code">```</span>json
{
  &quot;name&quot;: &quot;gitbook-plugin-simple-mind-map&quot;,
  &quot;version&quot;: &quot;0.2.1&quot;,
  &quot;description&quot;: &quot;A gitBook plugin for generating and exporting mind map within markdown&quot;
}
<span class="hljs-code">```</span>
<span class="hljs-code">```</span>json
{
  &quot;name&quot;: &quot;gitbook-plugin-diff&quot;,
  &quot;version&quot;: &quot;0.2.1&quot;,
  &quot;description&quot;: &quot;A gitbook plugin for showing the differences between the codes within markdown&quot;
}
<span class="hljs-code">```</span>
{% enddiff %}
</code></pre>
<ul>
<li>preview</li>
</ul>
<p><pre><code class="lang-diff">{
<span class="hljs-deletion">-   &quot;description&quot;: &quot;A gitBook plugin for generating and exporting mind map within markdown&quot;,</span>
<span class="hljs-addition">+   &quot;description&quot;: &quot;A gitbook plugin for showing the differences between the codes within markdown&quot;,</span>
    &quot;name&quot;: &quot;gitbook-plugin-diff&quot;,
    &quot;version&quot;: &quot;0.2.1&quot;
}
</code></pre>
</p>
<h2 id="usage">Usage</h2>
<h3 id="step-1---update-bookjson-file">Step #1 - Update <code>book.json</code> file</h3>
<p>In you gitbook&apos;s <code>book.json</code> file, add <code>diff</code> to <code>plugins</code> list.</p>
<p>Here is simplest example :</p>
<pre><code class="lang-json">{
    <span class="hljs-string">&quot;plugins&quot;</span>: [<span class="hljs-string">&quot;diff&quot;</span>]
}
</code></pre>
<p>In addition, the supported configuration options are as follows : </p>
<pre><code class="lang-json"><span class="hljs-string">&quot;gitbook&quot;</span>: {
    <span class="hljs-string">&quot;properties&quot;</span>: {
        <span class="hljs-string">&quot;type&quot;</span>: {
            <span class="hljs-string">&quot;type&quot;</span>: <span class="hljs-string">&quot;string&quot;</span>,
            <span class="hljs-string">&quot;title&quot;</span>: <span class="hljs-string">&quot;render type&quot;</span>,
            <span class="hljs-string">&quot;required&quot;</span>: <span class="hljs-literal">false</span>,
            <span class="hljs-string">&quot;default&quot;</span>: <span class="hljs-string">&quot;markdown&quot;</span>,
            <span class="hljs-string">&quot;description&quot;</span>: <span class="hljs-string">&quot;some supported methods such as markdown or console or html&quot;</span>
        },
        <span class="hljs-string">&quot;method&quot;</span>: {
            <span class="hljs-string">&quot;type&quot;</span>: <span class="hljs-string">&quot;string&quot;</span>,
            <span class="hljs-string">&quot;title&quot;</span>: <span class="hljs-string">&quot;jsdiff api method&quot;</span>,
            <span class="hljs-string">&quot;required&quot;</span>: <span class="hljs-literal">false</span>,
            <span class="hljs-string">&quot;default&quot;</span>: <span class="hljs-string">&quot;diffChars&quot;</span>,
            <span class="hljs-string">&quot;description&quot;</span>: <span class="hljs-string">&quot;some supported methods such as diffChars or diffWords or diffWordsWithSpace or diffLines or diffTrimmedLines or diffSentences or diffJson or diffArrays&quot;</span>
        },
        <span class="hljs-string">&quot;options&quot;</span>: {
            <span class="hljs-string">&quot;type&quot;</span>: <span class="hljs-string">&quot;object&quot;</span>,
            <span class="hljs-string">&quot;title&quot;</span>: <span class="hljs-string">&quot;jsdiff api options&quot;</span>,
            <span class="hljs-string">&quot;required&quot;</span>: <span class="hljs-literal">false</span>,
            <span class="hljs-string">&quot;description&quot;</span>: <span class="hljs-string">&quot;some methods may not support options&quot;</span>
        }
    }
}
</code></pre>
<h3 id="step-2---use-in-markdown-file">Step #2 - Use in markdown file</h3>
<p><code>diff</code> support <code>method</code> and <code>options</code> for generating diff block code.</p>
<p>Here is basic grammar in your markdown file :</p>
<pre><code>{% diff %}
```
old code
```
```
new code
```
{% enddiff %}
</code></pre><p>And there are some examples :</p>
<h4 id="diffdiffcharsoldstr-newstr-options"><code>Diff.diffChars(oldStr, newStr[, options])</code></h4>
<blockquote>
<p>diffs two blocks of text, comparing character by character.</p>
</blockquote>
<p><strong>Return</strong></p>
<p>Returns a list of change objects (See below).</p>
<p><strong>Option</strong></p>
<ul>
<li><code>ignoreCase</code>: <code>true</code> to ignore casing difference. Defaults to <code>false</code>.</li>
</ul>
<p><strong>Examples</strong></p>
<ul>
<li>usage </li>
</ul>
<blockquote>
<p>set <code>method=&quot;diffChars&quot;</code> to call <code>Diff.diffChars(oldStr, newStr[, options])</code> method</p>
</blockquote>
<pre><code class="lang-markdown">{% diff method=&quot;diffChars&quot; %}
<span class="hljs-code">```</span>js
cat
<span class="hljs-code">```</span>
<span class="hljs-code">```</span>js
cap
<span class="hljs-code">```</span>
{% enddiff %}
</code></pre>
<ul>
<li>preview </li>
</ul>
<p><pre><code class="lang-diff">  ca
<span class="hljs-deletion">- t</span>
<span class="hljs-addition">+ p</span>
</code></pre>
</p>
<h4 id="diffdiffwordsoldstr-newstr-options"><code>Diff.diffWords(oldStr, newStr[, options])</code></h4>
<blockquote>
<p>diffs two blocks of text, comparing word by word, ignoring whitespace.</p>
</blockquote>
<p><strong>Return</strong></p>
<p>Returns a list of change objects (See below).</p>
<p><strong>Option</strong></p>
<ul>
<li><code>ignoreCase</code>: Same as in <code>diffChars</code>.</li>
</ul>
<p><strong>Examples</strong></p>
<ul>
<li>usage </li>
</ul>
<blockquote>
<p>set <code>method=&quot;diffWords&quot;</code> to call <code>Diff.diffWords(oldStr, newStr[, options])</code> method</p>
</blockquote>
<pre><code class="lang-markdown">{% diff method=&quot;diffWords&quot; %}
<span class="hljs-code">```</span>bash
beep boop
<span class="hljs-code">```</span>
<span class="hljs-code">```</span>bash
beep boob blah
<span class="hljs-code">```</span>
{% enddiff %}
</code></pre>
<ul>
<li>preview </li>
</ul>
<p><pre><code class="lang-diff">  beep 
<span class="hljs-deletion">- boop</span>
<span class="hljs-addition">+ boob</span>

<span class="hljs-addition">+ blah</span>
</code></pre>
</p>
<h4 id="diffdiffwordswithspaceoldstr-newstr-options"><code>Diff.diffWordsWithSpace(oldStr, newStr[, options])</code></h4>
<blockquote>
<p>diffs two blocks of text, comparing word by word, treating whitespace as significant.</p>
</blockquote>
<p><strong>Return</strong></p>
<p>Returns a list of change objects (See below).</p>
<p><strong>Option</strong></p>
<ul>
<li><code>ignoreCase</code>: Same as in <code>diffWords</code>.</li>
</ul>
<p><strong>Examples</strong></p>
<ul>
<li>usage </li>
</ul>
<blockquote>
<p>set <code>method=&quot;diffWordsWithSpace&quot;</code> to call <code>Diff.diffWordsWithSpace(oldStr, newStr[, options])</code> method</p>
</blockquote>
<pre><code class="lang-markdown">{% diff method=&quot;diffWordsWithSpace&quot; %}
<span class="hljs-code">```</span>bash
beep boop  
<span class="hljs-code">```</span>
<span class="hljs-code">```</span>bash
beep boob blah
<span class="hljs-code">```</span>
{% enddiff %}
</code></pre>
<ul>
<li>preview </li>
</ul>
<p><pre><code class="lang-diff">  beep 
<span class="hljs-deletion">- boop</span>
<span class="hljs-addition">+ boob blah</span>
</code></pre>
</p>
<h4 id="diffdifflinesoldstr-newstr-options"><code>Diff.diffLines(oldStr, newStr[, options])</code></h4>
<blockquote>
<p>diffs two blocks of text, comparing line by line.</p>
</blockquote>
<p><strong>Return</strong></p>
<p>Returns a list of change objects (See below).</p>
<p><strong>Option</strong></p>
<ul>
<li><code>ignoreWhitespace</code>: <code>true</code> to ignore leading and trailing whitespace. This is the same as <code>diffTrimmedLines</code></li>
<li><code>newlineIsToken</code>: <code>true</code> to treat newline characters as separate tokens.  This allows for changes to the newline structure to occur independently of the line content and to be treated as such. In general this is the more human friendly form of <code>diffLines</code> and <code>diffLines</code> is better suited for patches and other computer friendly output.</li>
</ul>
<p><strong>Examples</strong></p>
<ul>
<li>usage </li>
</ul>
<blockquote>
<p>set <code>method=&quot;diffLines&quot;</code> to call <code>Diff.diffLines(oldStr, newStr[, options])</code> method</p>
</blockquote>
<pre><code class="lang-markdown">{% diff method=&quot;diffLines&quot;,options={&quot;newlineIsToken&quot;:true} %}
<span class="hljs-code">```</span>bash
beep boop
the cat is palying with cap
what
<span class="hljs-code">```</span>
<span class="hljs-code">```</span>bash
beep boob blah
the cat is palying with cap
who
<span class="hljs-code">```</span>
{% enddiff %}
</code></pre>
<ul>
<li>preview </li>
</ul>
<p><pre><code class="lang-diff"><span class="hljs-deletion">- beep boop</span>

<span class="hljs-addition">+ beep boob blah</span>

  the cat is palying with cap

<span class="hljs-deletion">- what</span>

<span class="hljs-addition">+ who</span>
</code></pre>
</p>
<h4 id="diffdifftrimmedlinesoldstr-newstr-options"><code>Diff.diffTrimmedLines(oldStr, newStr[, options])</code></h4>
<blockquote>
<p>diffs two blocks of text, comparing line by line, ignoring leading and trailing whitespace.</p>
</blockquote>
<p><strong>Return</strong></p>
<p>Returns a list of change objects (See below).</p>
<p><strong>Option</strong></p>
<ul>
<li><code>ignoreWhitespace</code>: Same as in <code>diffLines</code>.</li>
<li><code>newlineIsToken</code>: Same as in <code>diffLines</code>.</li>
</ul>
<p><strong>Examples</strong></p>
<ul>
<li>usage </li>
</ul>
<blockquote>
<p>set <code>method=&quot;diffTrimmedLines&quot;</code> to call <code>Diff.diffTrimmedLines(oldStr, newStr[, options])</code> method</p>
</blockquote>
<pre><code class="lang-markdown">{% diff method=&quot;diffTrimmedLines&quot;,options={&quot;newlineIsToken&quot;:true} %}
<span class="hljs-code">```</span>bash
beep boop
the cat is palying with cap
what
<span class="hljs-code">```</span>
<span class="hljs-code">```</span>bash
beep boob blah
the cat is palying with cat
who
<span class="hljs-code">```</span>
{% enddiff %}
</code></pre>
<ul>
<li>preview </li>
</ul>
<p><pre><code class="lang-diff"><span class="hljs-deletion">- beep boop</span>
<span class="hljs-deletion">- the cat is palying with cap</span>
<span class="hljs-deletion">- what</span>
<span class="hljs-addition">+ beep boob blah</span>
<span class="hljs-addition">+ the cat is palying with cat</span>
<span class="hljs-addition">+ who</span>
</code></pre>
</p>
<h4 id="diffdiffsentencesoldstr-newstr-options"><code>Diff.diffSentences(oldStr, newStr[, options])</code></h4>
<blockquote>
<p>diffs two blocks of text, comparing sentence by sentence.</p>
</blockquote>
<p><strong>Return</strong></p>
<p>Returns a list of change objects (See below).</p>
<p><strong>Examples</strong></p>
<ul>
<li>usage </li>
</ul>
<blockquote>
<p>set <code>method=&quot;diffSentences&quot;</code> to call <code>Diff.diffSentences(oldStr, newStr[, options])</code> method</p>
</blockquote>
<pre><code class="lang-markdown">{% diff method=&quot;diffSentences&quot; %}
<span class="hljs-code">```</span>bash
beep boop
the cat is palying with cap
what
<span class="hljs-code">```</span>
<span class="hljs-code">```</span>bash
beep boob blah
the cat is palying with cat
who
<span class="hljs-code">```</span>
{% enddiff %}
</code></pre>
<ul>
<li>preview </li>
</ul>
<p><pre><code class="lang-diff"><span class="hljs-deletion">- beep boop</span>
<span class="hljs-deletion">- the cat is palying with cap</span>
<span class="hljs-deletion">- what</span>
<span class="hljs-addition">+ beep boob blah</span>
<span class="hljs-addition">+ the cat is palying with cap</span>
<span class="hljs-addition">+ who</span>
</code></pre>
</p>
<h4 id="diffdiffjsonoldobj-newobj-options"><code>Diff.diffJson(oldObj, newObj[, options])</code></h4>
<blockquote>
<p>diffs two JSON objects, comparing the fields defined on each. The order of fields, etc does not matter in this comparison.</p>
</blockquote>
<p><strong>Return</strong></p>
<p>Returns a list of change objects (See below).</p>
<p><strong>Examples</strong></p>
<ul>
<li>usage </li>
</ul>
<blockquote>
<p>set <code>method=&quot;diffJson&quot;</code> to call <code>Diff.diffJson(oldObj, newObj[, options])</code> method</p>
</blockquote>
<pre><code class="lang-markdown">{% diff method=&quot;diffJson&quot; %}
<span class="hljs-code">```</span>json
{
  &quot;name&quot;: &quot;gitbook-plugin-simple-mind-map&quot;,
  &quot;version&quot;: &quot;0.2.1&quot;,
  &quot;description&quot;: &quot;A gitBook plugin for generating and exporting mind map within markdown&quot;
}
<span class="hljs-code">```</span>
<span class="hljs-code">```</span>json
{
  &quot;name&quot;: &quot;gitbook-plugin-diff&quot;,
  &quot;version&quot;: &quot;0.2.1&quot;,
  &quot;description&quot;: &quot;A gitbook plugin for showing the differences between the codes within markdown&quot;
}
<span class="hljs-code">```</span>
{% enddiff %}
</code></pre>
<ul>
<li>preview </li>
</ul>
<p><pre><code class="lang-diff">{
<span class="hljs-deletion">-   &quot;description&quot;: &quot;A gitBook plugin for generating and exporting mind map within markdown&quot;,</span>
<span class="hljs-deletion">-   &quot;name&quot;: &quot;gitbook-plugin-simple-mind-map&quot;,</span>
<span class="hljs-addition">+   &quot;description&quot;: &quot;A gitbook plugin for showing the differences between the codes within markdown&quot;,</span>
<span class="hljs-addition">+   &quot;name&quot;: &quot;gitbook-plugin-diff&quot;,</span>
    &quot;version&quot;: &quot;0.2.1&quot;
}
</code></pre>
</p>
<h4 id="diffdiffarraysoldarr-newarr-options"><code>Diff.diffArrays(oldArr, newArr[, options])</code></h4>
<blockquote>
<p>diffs two arrays, comparing each item for strict equality (===).</p>
</blockquote>
<p><strong>Return</strong></p>
<p>Returns a list of change objects (See below).</p>
<p><strong>Options</strong></p>
<ul>
<li><code>comparator</code>: <code>function(left, right)</code> for custom equality checks</li>
</ul>
<p><strong>Examples</strong></p>
<ul>
<li>usage </li>
</ul>
<blockquote>
<p>set <code>method=&quot;diffArrays&quot;</code> to call <code>Diff.diffArrays(oldArr, newArr[, options])</code> method</p>
</blockquote>
<pre><code class="lang-markdown">{% diff method=&quot;diffArrays&quot; %}
<span class="hljs-code">```</span>json
[
<span class="hljs-code">    &quot;Vue&quot;,</span>
<span class="hljs-code">    &quot;Python&quot;,</span>
<span class="hljs-code">    &quot;Java&quot;,</span>
<span class="hljs-code">    &quot;flutter&quot;,</span>
<span class="hljs-code">    &quot;springboot&quot;,</span>
<span class="hljs-code">    &quot;docker&quot;,</span>
<span class="hljs-code">    &quot;React&quot;,</span>
<span class="hljs-code">    &quot;&#x5C0F;&#x7A0B;&#x5E8F;&quot;</span>
]
<span class="hljs-code">```</span>
<span class="hljs-code">```</span>json
[
<span class="hljs-code">    &quot;Vuejs&quot;,</span>
<span class="hljs-code">    &quot;Nodejs&quot;,</span>
<span class="hljs-code">    &quot;Java&quot;,</span>
<span class="hljs-code">    &quot;flutter&quot;,</span>
<span class="hljs-code">    &quot;springboot&quot;,</span>
<span class="hljs-code">    &quot;docker&quot;,</span>
<span class="hljs-code">    &quot;React&quot;</span>
]
<span class="hljs-code">```</span>
{% enddiff %}
</code></pre>
<ul>
<li>preview </li>
</ul>
<p><pre><code class="lang-diff">[
<span class="hljs-deletion">- Vue</span>
<span class="hljs-deletion">- Python</span>
<span class="hljs-addition">+ Vuejs</span>
<span class="hljs-addition">+ Nodejs</span>
  Java
  flutter
  springboot
  docker
  React
<span class="hljs-deletion">- &#x5C0F;&#x7A0B;&#x5E8F;</span>
]
</code></pre>
</p>
<h3 id="step-3---run-gitbook-commands">Step #3 - Run gitbook commands</h3>
<ol>
<li>Run <code>gitbook install</code>. It will automatically install <code>diff</code> gitbook plugin for your book. This is needed only once.</li>
</ol>
<pre><code class="lang-bash">gitbook install
</code></pre>
<p>or you can run <code>npm install gitbook-plugin-diff</code> to install locally.</p>
<pre><code class="lang-bash">npm install gitbook-plugin-diff
</code></pre>
<ol>
<li>Build your book (<code>gitbook build</code>) or serve (<code>gitbook serve</code>) as usual.</li>
</ol>
<pre><code class="lang-bash">gitbook serve
</code></pre>
<h2 id="examples">Examples</h2>
<ul>
<li>Official documentation configuration file</li>
</ul>
<blockquote>
<p><a href="https://github.com/snowdreams1006/gitbook-plugin-diff/blob/master/docs/book.json" target="_blank">https://github.com/snowdreams1006/gitbook-plugin-diff/blob/master/docs/book.json</a></p>
</blockquote>
<pre><code class="lang-json">{
    <span class="hljs-string">&quot;plugins&quot;</span>: [<span class="hljs-string">&quot;diff&quot;</span>],
    <span class="hljs-string">&quot;pluginsConfig&quot;</span>: {
        <span class="hljs-string">&quot;diff&quot;</span>: {
            <span class="hljs-string">&quot;method&quot;</span>: <span class="hljs-string">&quot;diffJson&quot;</span>
        }
    }
}
</code></pre>
<ul>
<li>Official example configuration file</li>
</ul>
<blockquote>
<p><a href="https://github.com/snowdreams1006/gitbook-plugin-diff/blob/master/example/book.json" target="_blank">https://github.com/snowdreams1006/gitbook-plugin-diff/blob/master/example/book.json</a></p>
</blockquote>
<pre><code class="lang-json">{
    <span class="hljs-string">&quot;plugins&quot;</span>: [<span class="hljs-string">&quot;diff&quot;</span>],
    <span class="hljs-string">&quot;pluginsConfig&quot;</span>: {
        <span class="hljs-string">&quot;diff&quot;</span>: {
            <span class="hljs-string">&quot;method&quot;</span>: <span class="hljs-string">&quot;diffJson&quot;</span>
        }
    }
}
</code></pre>
<ul>
<li>Sample <code>book.json</code> file </li>
</ul>
<pre><code class="lang-json">{
    <span class="hljs-string">&quot;plugins&quot;</span>: [<span class="hljs-string">&quot;diff&quot;</span>]
}
</code></pre>
<p>or you can set <code>method</code> as your default method to compare between codes:</p>
<pre><code class="lang-json">{
    <span class="hljs-string">&quot;plugins&quot;</span>: [<span class="hljs-string">&quot;diff&quot;</span>],
    <span class="hljs-string">&quot;pluginsConfig&quot;</span>: {
        <span class="hljs-string">&quot;diff&quot;</span>: {
            <span class="hljs-string">&quot;method&quot;</span>: <span class="hljs-string">&quot;diffChars&quot;</span>
        }
    }
}
</code></pre>
<p>or you can set <code>options</code> as your default settings according to method:</p>
<pre><code class="lang-json">{
    <span class="hljs-string">&quot;plugins&quot;</span>: [<span class="hljs-string">&quot;diff&quot;</span>],
    <span class="hljs-string">&quot;pluginsConfig&quot;</span>: {
        <span class="hljs-string">&quot;diff&quot;</span>: {
            <span class="hljs-string">&quot;method&quot;</span>: <span class="hljs-string">&quot;diffChars&quot;</span>,
            <span class="hljs-string">&quot;options&quot;</span>: {
              <span class="hljs-string">&quot;ignoreCase&quot;</span>: <span class="hljs-literal">true</span>
            }
        }
    }
}
</code></pre>
<p><strong>Note</strong>: Above snippet can be used as complete <code>book.json</code> file, if your book doesn&apos;t have one yet.</p>
<h2 id="thanks">Thanks</h2>
<ul>
<li>A javascript text differencing implementation. : <a href="https://github.com/kpdecker/jsdiff" target="_blank">https://github.com/kpdecker/jsdiff</a></li>
<li>get colors in your node.js console : <a href="https://github.com/Marak/colors.js" target="_blank">https://github.com/Marak/colors.js</a></li>
<li>GitBook CodeGroup Plugin : <a href="https://github.com/lwhiteley/gitbook-plugin-codegroup" target="_blank">https://github.com/lwhiteley/gitbook-plugin-codegroup</a></li>
</ul>
<h2 id="author">Author</h2>
<p>&#x1F464; <strong>snowdreams1006</strong></p>
<ul>
<li>Website: <a href="https://snowdreams1006.tech/" target="_blank">snowdreams1006.tech</a></li>
<li>Github: <a href="https://github.com/snowdreams1006" target="_blank">@snowdreams1006</a></li>
<li>Email: <a href="mailto:snowdreams1006@163.com" target="_blank">snowdreams1006@163.com</a></li>
</ul>
<h2 id="contributing">Contributing</h2>
<p>Contributions, issues and feature requests are welcome! Feel free to check <a href="https://github.com/snowdreams1006/gitbook-plugin-diff/issues" target="_blank">issues page</a>.</p>
<h2 id="show-your-support">Show your support</h2>
<p>Give a <a href="https://github.com/snowdreams1006/gitbook-plugin-diff" target="_blank">Star</a> if this project helped you!</p>
<h2 id="copyright">Copyright</h2>
<p>Copyright &#xA9; 2019 <a href="https://github.com/snowdreams1006" target="_blank">snowdreams1006</a>.</p>
<p>This project is <a href="https://github.com/snowdreams1006/gitbook-plugin-diff/blob/master/LICENSE" target="_blank">MIT</a> licensed.</p>
<pre><code class="lang-html">Author: snowdreams1006
Url: https://snowdreams1006.github.io/gitbook-plugin-diff/en/
Source: snowdreams1006.tech
This article was originally published in&#x300C;snowdreams1006.tech&#x300D;,Reproduced please indicate the source, thank you for cooperation!
</code></pre>
<p><img src="https://snowdreams1006.github.io/snowdreams1006-wechat-open.png" alt="https://snowdreams1006.github.io/snowdreams1006-wechat-open.png"></p>
<div id="gitalk-container"></div>
                </div>
                <script src="https://my.openwrite.cn/js/readmore.js"></script>
                <script>
                    var enablePlugin = false;
                    var allowDomain = "localhost";
                    if(allowDomain){
                        var currentDomain = location.hostname;
                        if ($.isArray(allowDomain)) {
                            $.each(allowDomain, function(index, item) {
                                if (currentDomain == item) {
                                    enablePlugin = true;
                                    return false;
                                }
                            });
                        }else{
                           if (currentDomain == allowDomain) {
                                enablePlugin = true;
                            }
                        }
                    }else{
                        enablePlugin = true;
                    }
                    
                    if(enablePlugin){
                        var isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
                        if (!isMobile) {
                            var btw = new BTWPlugin();
                            btw.init({"allowDomain":"localhost","blogId":"15702-1569305559839-744","name":"雪之梦技术驿站","qrcode":"https://snowdreams1006.github.io/snowdreams1006-wechat-public.jpeg","keyword":"vip","id":"vip-container"});
                        }
                    }
                </script>
                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"Introduction","level":"1.1","depth":1,"next":{"title":"gitbook-official","level":"1.2","depth":1,"url":"https://snowdreams1006.github.io/gitbook-official/","ref":"https://snowdreams1006.github.io/gitbook-official/","articles":[]},"dir":"ltr"},"config":{"plugins":["favicon-absolute","github-buttons","edit-link-plus","code","readmore","copyright","mygitalk","icp","diff"],"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"diff":{"method":"diffChars","options":{},"type":"markdown"},"copyright":{"copyProtect":false,"site":"https://snowdreams1006.github.io/gitbook-plugin-diff","author":"snowdreams1006","website":"snowdreams1006.tech","image":"https://snowdreams1006.github.io/snowdreams1006-wechat-open.png"},"search":{},"edit-link-plus":{"label":"Edit This Page","base":{"snowdreams1006.github.io":"https://github.com/snowdreams1006/gitbook-plugin-diff/edit/master/docs","snowdreams1006.gitlab.io":"https://gitlab.com/snowdreams1006/gitbook-plugin-diff/edit/master/docs","snowdreams1006.gitee.io":"https://gitee.com/snowdreams1006/gitbook-plugin-diff/edit/master/docs"},"defaultBase":"https://github.com/snowdreams1006/gitbook-plugin-diff/edit/master/docs"},"readmore":{"allowDomain":"localhost","blogId":"15702-1569305559839-744","name":"雪之梦技术驿站","qrcode":"https://snowdreams1006.github.io/snowdreams1006-wechat-public.jpeg","keyword":"vip"},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"code":{"copyButtons":true},"favicon-absolute":{"appleTouchIconMore":{"120x120":"/apple-touch-icon-120.png","180x180":"/apple-touch-icon-180.png"},"appleTouchIconPrecomposed152":"/apple-touch-icon-precomposed-152.png","appleTouchIconPrecomposedMore":{"120x120":"/apple-touch-icon-precomposed-120.png","180x180":"/apple-touch-icon-precomposed-180.png"},"favicon":"/favicon.ico","bookmark":"/bookmark.ico","appleTouchIcon152":"/apple-touch-icon-152.png"},"fontsettings":{"theme":"white","family":"sans","size":2},"highlight":{},"icp":{"link":"http://www.beian.miit.gov.cn/","style":{},"number":"浙ICP备18042346号"},"github-buttons":{"buttons":[{"user":"snowdreams1006","repo":"gitbook-plugin-diff","type":"star","size":"small"}]},"mygitalk":{"flipMoveOptions":{},"clientID":"b41f45e89afe86e4782f","number":-1,"perPage":10,"proxy":"https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token","admin":["snowdreams1006"],"createIssueManually":false,"distractionFreeMode":false,"repo":"gitbook-plugin-diff","owner":"snowdreams1006","enableHotKey":true,"clientSecret":"50efaa46056c41abbdc7537cd09061677d02c0af","pagerDirection":"last","labels":["Gitalk"]},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","author":"snowdreams1006","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"diff docs","language":"en","links":{"sidebar":{"blog":"https://snowdreams1006.tech/"}},"gitbook":"*","description":"gitbook-plugin-diff docs"},"file":{"path":"README.md","mtime":"2020-04-12T16:04:11.871Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2020-04-12T16:12:37.989Z"},"basePath":".","book":{"language":"en"}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-github-buttons/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-edit-link-plus/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-code/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-copyright/plugin.js"></script>
        
    
        
        <script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
        
    
        
        <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-mygitalk/mygitalk.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

